@extends('admin.layout')

@section('title', 'Administrator\'s Login')

@section('pagebody')
  <div class="middle-box text-center loginscreen animated fadeInDown">
    <h1 class="logo-name">魅课</h1>
    <h3>{{ Inspiring::quote() }}</h3>
    <form id="formLogin" class="m-t" role="form" action="" onsubmit="return false;">
      <div class="form-group">
        <input type="text" name="username" class="form-control" placeholder="用户名/邮箱/手机号" required="" autofocus="" />
      </div>
      <div class="form-group">
        <input type="password" name="password" class="form-control" placeholder="请输入密码" required="" />
      </div>
      <div class="form-group row">
        <div class="col-sm-7">
          <div>
            <input type="text" name="captcha" class="form-control" placeholder="验证码" maxlength="4" autocomplete="off" required="" />
          </div>
        </div>
        <div class="col-sm-5">
          <a href="javascript:;" onclick="changeCaptchaImg()" title="点击更换">
            <img id="captchaImg" src="{{captcha_src()}}" />
          </a>
        </div>
      </div>
      <button type="submit" class="btn btn-warning block full-width m-b">登录系统</button>
      <p class="clearfix">
        <a href="{{url('admin/account/register')}}" class="pull-left">
          <small>创建新帐户</small>
        </a>
        <a href="{{url('admin/account/forgot')}}" class="pull-right">
          <small>忘记登录密码？</small>
        </a>
      </p>
    </form>
  </div>
@endsection

@section('pageheader')
  <style>
    body {background-color: #f3f3f4;}
  </style>
@endsection

@section('pagescript')
  <script src="{{asset('assets/models/userModel.js')}}"></script>
  <script>
    var changeCaptchaImg = function(){
      $("#captchaImg").attr('src', '{{captcha_src()}}' + Math.random());
    };

    $("#formLogin").on("submit", function(){
      var that = this;
      $(this).find(":submit").attr("disabled", "disabled");
      var formdata = $(this).serialize();
      userModel.login(formdata, function(result){
        window.location.reload();
      }, function(result){
        $(that).find(":submit").removeAttr("disabled");
        changeCaptchaImg();
        failure(result);
      });
      return false;
    });

    (function(){
      var supportPlaceholder = 'placeholder' in document.createElement('input');
      if (!supportPlaceholder) {
        $(".form-group input").each(function() {
          var that = this, txtPlaceholder = $(this).attr("placeholder");
          var tt = $("<tt></tt>").text(txtPlaceholder);
          tt.css({
            "position":"absolute",
            "left":"14px",
            "top":"0",
            "line-height":"34px",
            "color": "gray",
          }).on("click", function(){
            $(that).focus();
          });
          $(this).parent().css("position", "relative");
          $(this).after(tt);
          $(this).on("change keyup", function(){
            this.value == this.defaultValue ? tt.show() : tt.hide();
          });
        });
      }
    })();
  </script>
@endsection